<template>
  <el-dialog
    title="编辑商品"
    :visible.sync="visible"
    width="1250px"
    top="5vh"
    :before-close="
      () => {
        $emit('close');
      }
    "
    @close="editorDestroy"
  >
    <div style="border-bottom:1px solid #dfdfdf">
      <el-steps :active="step" align-center finish-status="success">
        <el-step title="编辑商品信息" />
        <el-step title="选择属性规格" />
        <!-- <el-step title="选择属性价格" /> -->
        <el-step title="编辑商品详情" />
      </el-steps>
    </div>
    <div style="height:550px; overflow:auto;margin-top:10px;">
      <step-1
        v-if="step === 0"
        ref="stepOne"
        :good-detail="goodDetailOne"
        :step="step"
        :is-edit="isEdit"
        @nextStep="step_1_finish"
        @editNextStep="step = 1"
        @changeEdit="isEdit = false"
      />
      <step-2
        v-if="step === 1"
        :id="currentId"
        ref="stepTwo"
        :is-edit="isEdit"
        :prop-data="propData"
        @nextStep="step_2_finish"
      />
      <!-- <step-3
        v-if="step === 2"
        :id="currentId"
        ref="stepThree"
        :is-edit="isEdit"
        :step="step"
        @nextStep="step += 1"
      /> -->
      <el-form v-if="step === 2" ref="form" label-width="80px">
        <el-form-item label="详情">
          <div id="toolbar" style="border: 1px solid #dfdfdf;" />
          <div
            id="editor"
            style="height:400px; border: 1px solid #dfdfdf;"
          />
        </el-form-item>
        <el-form-item label="是否上架">
          <el-switch
            v-model="is_putaway"
            active-color="#13ce66"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
      </el-form>
    </div>
    <div v-if="step === 0" class="bottom-bar">
      <el-button
        v-if="isEdit"
        size="small"
        type="primary"
        @click="preToPropEdit"
      >下一步，编辑属性规格</el-button>
      <el-button
        v-else
        size="small"
        type="primary"
        @click="goodInfoSubmit"
      >下一步，选择属性规格</el-button>
    </div>
    <div v-if="step === 1" class="bottom-bar">
      <el-button size="small" @click="step = 0">上一步，编辑商品信息</el-button>
      <el-button
        size="small"
        type="primary"
        @click="goodSpecSubmit"
      >下一步，编辑商品详情</el-button>
    </div>
    <div v-if="step === 2" class="bottom-bar">
      <el-button
        v-if="isEdit"
        size="small"
        @click="preToPropEdit"
      >上一步，编辑属性规格</el-button>
      <el-button
        v-else
        size="small"
        @click="step = 1"
      >上一步，编辑商品信息</el-button>
      <el-button
        size="small"
        type="primary"
        @click="goodPriceSubmit"
      >完成</el-button>
    </div>
    <div v-if="step === 3" class="bottom-bar">
      <el-button size="small" @click="step = 2">上一步，编辑属性价格</el-button>
      <el-button
        size="small"
        type="primary"
        @click="detailSubmit"
      >完成</el-button>
    </div>
  </el-dialog>
</template>

<script>
import step1 from './step-1'
import step2 from './step-2'
import step3 from './step-3'
import E from 'wangeditor'
const editor = new E('#toolbar', '#editor')
import { editGoodFour } from '@/api/good-mng'
import { fileUpload } from '@/api/file'
import { getGoodDetail, getGoodDetailOne, editProperty, sendCommentDetail, getCommentDetail } from '@/api/good-mng'
const ERR_OK = 200
export default {
  components: {
    step1,
    step2,
    step3
  },
  props: ['visible', 'goodInfo'],
  data() {
    return {
      step: null,
      is_putaway: 0,
      currentId: null,
      goodDetailOne: {},
      isEdit: false,
      id: '',
      propData: {}
    }
  },
  watch: {
    visible: function(val) {
      if (val) {
        this.step = 0
        if (Object.keys(this.goodInfo).length) {
          this.currentId = this.goodInfo.id
          this.isEdit = true
        } else {
          this.currentId = null
          this.isEdit = false
        }
      } else {
        this.goodDetailOne = {}
        this.step = null
      }
    },
    step: function(val) {
      switch (val) {
        case 0:
          if (this.currentId) {
            getGoodDetailOne({ id: this.currentId }).then(res => {
              if (res.code === 200) {
                this.goodDetailOne = res.data
              }
            })
          }
          break
        case 1:
          if (this.currentId) {
            this._editProperty(this.currentId)
          }
          break
        case 2:
          this.editorInit()
          this.$nextTick(() => {
            console.log(this.$refs.stepThree)
            // this.$refs.stepThree.getData()
            this._getCommentDetail(this.currentId)
              .then(res => {
                // editor.create()
                editor.txt.html(res.data.introduce)
              })
              .catch(err => {
                console.log(err)
              })
          })

          break
        // case 3:
        //   this.getGoodDetail()
        //   break
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    preToPropEdit() {
      if (this.isEdit) {
        this.step = 1
        if (this.id) {
          this._editProperty(this.id)
        }
        this.$refs.stepOne.submit()
      }
    },
    step_2_finish(id) {
      this.step += 1
      this.id = id
    },
    goodPriceSubmit() {
      // this.$refs.stepThree.submit()
      this._sendCommentDetail({ id: this.id, putaway: this.is_putaway, introduce: editor.txt.html() })
        .then(() => {
          this.$emit('close')
        })
        .catch(err => {
          console.log(err)
        })
    },
    goodSpecSubmit() {
      this.$refs.stepTwo.submit()
    },
    step_1_finish(val) {
      this.step += 1
      this.currentId = val
      this.isEdit = true
    },
    goodInfoSubmit() {
      this.$refs.stepOne.submit()
    },
    detailSubmit() {
      editGoodFour({
        id: this.currentId,
        putaway: this.is_putaway,
        introduce: editor.txt.html()
      }).then(res => {
        if (res.code === 200) {
          this.step = 0
          this.$emit('close')
        }
      })
    },
    getGoodDetail() {
      getGoodDetail({ id: this.currentId }).then(res => {
        if (res.code === 200) {
          editor.txt.html(res.data.introduce)
          this.is_putaway = res.data.is_putaway
        }
      })
    },
    editorInit() {
      this.$nextTick(() => {
        editor.customConfig.zIndex = 100
        editor.customConfig.customUploadImg = function(files, insert) {
          console.log(files.length)
          for (let i = 0; i < files.length; i++) {
            const formData = new FormData()
            formData.append('file', files[i])
            fileUpload(formData).then(res => {
              if (res.code === 200) {
                insert(res.data.file)
              }
            })
          }
        }
        editor.create()
      })
    },
    editorDestroy() {
      // document.getElementById('toolbar').innerHTML = ''
      if (this.step === 3) document.getElementById('editor').innerHTML = ''
    },
    _editProperty(id) {
      editProperty(id)
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.propData = res.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _sendCommentDetail({ id, putaway, introduce }) {
      return new Promise((resolve, reject) => {
        sendCommentDetail({ id, putaway, introduce })
          .then(res => {
            if (res.code === ERR_OK) {
              console.log(res)
              this.$message({
                message: res.data.message,
                type: 'success'
              })
              resolve()
            }
          })
          .catch(err => {
            console.log(err)
            reject(err)
          })
      })
    },
    _getCommentDetail(id) {
      return new Promise((resolve, reject) => {
        getCommentDetail(id)
          .then(res => {
            if (res.code === ERR_OK) {
              console.log(res)
              resolve(res)
            }
          })
          .catch(err => {
            console.log(err)
            reject(err)
          })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.bottom-bar {
  text-align: center;
  button {
    width: 180px;
  }
}
// .el-button:hover{
//   background: #409EFF !important;
//   color: #fff;
// }
</style>
